<template>
    <div class="Follow">
        <button class="follow" v-if="info.is_guanzhu==0"  open-type="getUserInfo" @getuserinfo="bindGetUserInfo($event,info,userId)">
           <img src="/static/images/add.png" alt="" class="add">关注
        </button>  
        <button class="follow followed" v-if="info.is_guanzhu==1" open-type="getUserInfo" @getuserinfo="bindGetUserInfo($event,info,userId)">已关注</button>
    </div>
</template>

<script>
import {follow} from "@/api/operate"
import { xdLogin } from "@/utils/login"
export default {
    props: ['info','userId'],
    methods:{
       follow(info,userId){
          let that=this;
          let data={};
          data.id=userId;
          follow(data).then(res=>{
             if(res.code==200){
                info.is_guanzhu=!(info.is_guanzhu)
             }
          })
                
       },
       bindGetUserInfo(e,info,userId){
          var that=this;
           wx.getStorage({
              key: 'token',
              success: (result) => {
                  that.follow(info,userId)
              },
              fail: () => {
                  xdLogin(e).then((res)=>{

                  })
              },
              complete: () => {}
           });
             
       }
    }
}
</script>

<style lang="scss" >
 .follow {
    width: 69px;
    line-height: 27px;
    background: rgba(26, 132, 251, 1);
    border-radius: 5px;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(26, 132, 251, 1);
    padding:0;
    .add {
      width: 14px;
      height: 14px;
      vertical-align: middle;
      margin-right: 5px;
    }
  }

  .followed {
    background: #fff;
    color: rgba(26, 132, 251, 1);
  }
</style>
